<template>
  <div>
    <header>
      <div class="close" @click="$router.go(-1)">
        <van-icon name="arrow-left" />
      </div>
      <section class="h_top">
        <div
          class="h_top_bg"
          :style="'background-image:url(' + songListDetail.coverImgUrl + ')'"
        ></div>
        <div class="h_top_box">
          <div class="box_left">
            <img :src="songListDetail.coverImgUrl" />
            <div class="playCount">
              <div class="playCount_img">
                <img src="../assets/erji.png" />
              </div>
              <div>{{ (songListDetail.playCount / 10000).toFixed(1) }}万</div>
            </div>
            <div class="little_box">歌单</div>
          </div>
          <div class="box_right">
            <div class="right_top">{{ songListDetail.name }}</div>
            <div class="right_center">
              <div class="creator_img">
                <img :src="creator.avatarUrl" />
              </div>
              <div class="creator_name">
                {{ creator.nickname }}
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="h_bottom">
        <div class="tags">
          标签 :
          <span v-for="(el, idx) in songListDetail.tags" :key="idx">{{
            el
          }}</span>
        </div>
        <div class="description">
          <span :class="onoff ? 'zhankai' : 'shouqi'"
            >简介:{{ songListDetail.description }}</span
          >
          <div @click="changeOnoff" class="kaiguan">
            <img v-if="onoff" src="../assets/down.png" />
            <img v-else src="../assets/up.png" />
          </div>
        </div>
      </section>
    </header>
    <div class="songlist">
      <p class="list_tilte">歌曲列表</p>
      <div class="hotsong_box">
        <ul>
          <song
            v-for="(song, idx) in songList"
            :key="song.id"
            :song_data="{
              song_name: song.name,
              song_artists: song.ar,
              song_album: song.al.name,
              song_exclusive: true,
              id: song.id,
              idx: idx + 1,
            }"
            :idx="idx"
            :id_list="id_lis"
          ></song>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { get_songListDetail } from "../api/songlist";
import song from "../components/song";
export default {
  data() {
    return {
      songListDetail: {},
      songList: [],
      creator: {},
      onoff: true,
    };
  },
  computed: {
    id_lis() {
      return this.songList.map((el) => el.id);
    },
  },
  components: {
    song,
  },
  created() {
    get_songListDetail(this.$route.query.id).then((res) => {
      this.songListDetail = res.data.playlist;
      this.creator = res.data.playlist.creator;
      this.songList = res.data.playlist.tracks;
    });
  },
  methods: {
    changeOnoff() {
      this.onoff = !this.onoff;
    },
  },
};
</script>

<style lang="scss" scoped>
header {
  width: 100vw;
  .close {
    position: fixed;
    top: 10px;
    z-index: 4;
    i {
      font-size: 20px;
      color: white;
      font-weight: bold;
    }
  }
  .h_top {
    width: 100%;
    height: 28vh;
    position: relative;
    overflow: hidden;
    .h_top_bg {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      background-size: cover;
      background-position: center;
      filter: blur(15px);
      transform: scale(1.2);
    }
    .h_top_box {
      width: 93%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      display: flex;
      justify-content: space-between;
      .box_left {
        width: 35vw;
        height: 35vw;
        overflow: hidden;
        position: relative;
        img {
          width: 100%;
        }
        .playCount {
          position: absolute;
          top: 0;
          right: 5px;
          display: flex;
          color: white;
          font-size: 12px;
          .playCount_img {
            width: 12px;
            height: 12px;
            padding: 1px 5px 0;
            vertical-align: baseline;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .little_box {
          font-size: 9px;
          padding: 1vw 0;
          color: white;
          position: absolute;
          top: 1vh;
          left: -2vw;
          width: 10vw;
          border-radius: 3vw;
          background-color: rgba(217, 48, 48, 0.8);
        }
      }
      .box_right {
        width: 60%;
        position: relative;
        .right_top {
          text-align: left;
          color: white;
        }
        .right_center {
          display: flex;
          position: absolute;
          top: 50%;
          .creator_img {
            width: 10vw;
            height: 10vw;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .creator_name {
            font-size: 12px;
            color: hsla(0, 0%, 100%, 0.7);
            align-self: center;
          }
        }
      }
    }
  }
  .h_bottom {
    color: #666666;
    .tags {
      text-align: left;
      padding: 2vw 3vw;
      font-size: 14px;
      span {
        font-size: 12px;
        padding: 1px 5px;
        margin-right: 2vw;
        border: 1px solid rgba($color: #666666, $alpha: 0.5);
        border-radius: 10px;
      }
    }
    .description {
      text-align: left;
      padding: 2vw 3vw 4vw 3vw;
      font-size: 14px;
      position: relative;
      .zhankai {
        overflow: auto;
      }
      .shouqi {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .kaiguan {
        position: absolute;
        bottom: 0;
        right: 5px;
        width: 15px;
        height: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.songlist {
  width: 100vw;
  .list_tilte {
    font-size: 12px;
    padding: 1vw 0;
    margin: 0;
    text-align: left;
    background-color: #eeeff0;
  }
  .hotsong_box {
    ul {
      width: 100%;
      overflow: hidden;
    }
  }
}
</style>
